<template>
  <div class="app-user">
   <Query
     :items="queryColumns"
     :initial-params="queryParams"
     @query="handleQuery"
   />
   <Table
     :table-columns="tableColumns"
     :table-loading="tableLoading"
     :table-data="tableData"
     :total="total"
     :showIndex="true"
     @pagination="handlePagination"
   >
     <template #avatar="scope">
       <img :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50%;" alt="">
     </template>
     <template #status="scope">
       {{ scope.row.status === 1 ? '正常' : '停用' }}
     </template>
     <!-- <template #contractStatus="scope">
       {{ contractStatusList[scope.row.isTag] }}
     </template> -->
     <template #opt="scope">
       <el-button :type="scope.row.status === 1 ? 'danger' : 'primary'" link @click="changeValue(scope.row)">{{ scope.row.status === 1 ? '冻结' : '恢复' }}</el-button>
     </template>
   </Table>
  </div>
</template>

<script setup name="user">
import Table from "@/components/Table/index.vue";
import Query from "@/components/Query/index.vue";
import { getListApi } from "@/api/role/index.js";
const { proxy } = getCurrentInstance()
const tableData = ref([])
const total = ref(0)
const tableLoading = ref(true)
const loading = ref(false)
const showDialog = ref(false)
const contractStatusList = {
  0: '作废', 
  1: "草稿",
  2: "未签约",
  3: "履约中",
  4: "已逾期",
  5: "已完结",
}
const data = reactive({
 tableColumns: [
   { label: "角色名", prop: "roleName" },
   { label: "类型", prop: "roleType" },
   { label: "状态", prop: "status", slot: 'status' },
   { label: "创建时间", prop: "createTime", },
  //  { label: "操作",  prop: "opt", slot: 'opt'},
 ],
 queryColumns: [
   { label: '角色名', prop: 'roleName', type: 'input', attrs: { placeholder: '请输入' } },
   { label: '状态', prop: 'contractStatus', type: 'select', options: [{ label: "草稿", value: 1 }]}
 ],
 pageParams: {
  current: 1,
  size: 10
 },
 queryParams: {},
 formItems: [
   {
     prop: 'nickName',
     label: '用户昵称',
     type: 'input',
     placeholder: '请输入用户昵称'
   },
   {
     prop: 'tele',
     label: '手机号',
     attrs: { maxlength: 11 },
     type: 'input',
     placeholder: '请输入手机号'
   },
   {
     prop: 'status',
     label: '启用状态',
     type: 'switch',
     attrs: {
       activeValue: 1,
       inactiveValue: 0,
       activeColor:"#13ce66",
       inactiveColor:"#ff4949"
     }
   },
 ]
})

const { tableColumns, queryColumns, pageParams, queryParams } = toRefs(data)
/** 获取列表数据 */
const getList = () => {
  tableLoading.value = true
  const data  = {
     ...queryParams.value,
     ...pageParams.value
  }
  getListApi(data)
   .then(res => {
       tableData.value = res.data.records
       total.value = res.data.totalRow
   })
   .finally(() => {
       tableLoading.value = false
   })
}
getList()

/** 搜索按钮操作 */
const handleQuery = (val) => {
 queryParams.value = val
 getList()
}

const handlePagination = (val) => {
 pageParams.value = val
 getList()
}
const handleSubmit = async (data) => {
 loading.value = true
 try {
   // 这里调用API进行提交
   await saveUser(data)
   await new Promise(resolve => setTimeout(resolve, 1000))
   showDialog.value = false
   getList()
   proxy.$modal.msgSuccess("操作成功")
 } finally {
   loading.value = false
 }
}
const changeValue = (row) => {
 proxy.$modal.confirm(`是否确认${row.status === 1 ? '冻结' : '恢复'}此用户？`)
 .then(() => {
   saveUser({ id: row.id, account: row.account, status: row.status === 1 ? 0 : 1})
   .then(() => {
     proxy.$modal.msgSuccess("操作成功")
     getList()
   })
 })
}

</script>
<style lang="scss">
.app-user {
 padding: 8px;
}
</style>